<template>
		<div class="m_sbjsq">

      <section class="gd1">
      	<a class="gd1_a" href="javascript:;" @click="back()"></a>
      	<h3>
      		社保缴费计算器
      		<a href="tel:400-855-1888" class="chj_right"><img src="~/assets/img/chj_phone.png"/></a>
      	</h3>

      </section>

			<a class="m_sbjsq_banner" href="javascript:;"></a>

			<div class="m_sbjsq_main">
				<ul class="taps">
					<li @click = "tap(0)">
						<a class="m_sbjsq_icon" href="javascript:;"><img src="~/assets/img/m_sbjsq_icon1.png"></a>
						<p>社保计算器</p>
					</li>
					<li @click = "tap(1)">
						<a class="m_sbjsq_icon" href="javascript:;"><img src="~/assets/img/m_sbjsq_icon2.png" ></a>
						<p>公积金计算器</p>
					</li>
					<li @click = "tap(2)">
						<a class="m_sbjsq_icon" href="javascript:;"><img src="~/assets/img/m_sbjsq_icon3.png" ></a>
						<p>所得税计算器</p>
					</li>
				</ul>




				<section class="box">
					<div class="m_sbjsq_bd">
						<div class="bd_item1">
							<h4>社保计算器</h4>
							<div class="input">
								<input type="" name="" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" v-model="sbtext" placeholder="请输入员工个人工资金额" />
								<i>元</i>
							</div>
							<a href="javascript:;" @click="sbsubmit()">提交</a>
						</div>
						<div class="bd_item2">
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th><span class="mtable_tit">养老保险</span></th>
									<th>企业</th>
									<th>个人</th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>{{sbdatas?sbdatas.cqypension:0}}</td>
									<td>{{sbdatas?sbdatas.cgrpension:0}}</td>
								</tr>
								<tr>
									<td>农村户口</td>
									<td>{{sbdatas?sbdatas.nqypension:0}}</td>
									<td>{{sbdatas?sbdatas.ngrpension:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th><span class="mtable_tit">失业保险</span></th>
									<th>企业</th>
									<th>个人</th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>{{sbdatas?sbdatas.cqyunemployment:0}}</td>
									<td>{{sbdatas?sbdatas.cgrunemployment:0}}</td>
								</tr>
								<tr>
									<td>农村户口</td>
									<td>{{sbdatas?sbdatas.nqyunemployment:0}}</td>
									<td>{{sbdatas?sbdatas.ngrunemployment:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th><span class="mtable_tit">工伤保险</span></th>
									<th>企业</th>
									<th>个人</th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>{{sbdatas?sbdatas.cqyjobinjury:0}}</td>
									<td>{{sbdatas?sbdatas.cgrjobinjury:0}}</td>
								</tr>
								<tr>
									<td>农村户口</td>
									<td>{{sbdatas?sbdatas.nqyjobinjury:0}}</td>
									<td>{{sbdatas?sbdatas.ngrjobinjury:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th><span class="mtable_tit">生育保险</span></th>
									<th>企业</th>
									<th>个人</th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>{{sbdatas?sbdatas.cqybirth:0}}</td>
									<td>{{sbdatas?sbdatas.cgrbirth:0}}</td>
								</tr>
								<tr>
									<td>农村户口</td>
									<td>{{sbdatas?sbdatas.nqybirth:0}}</td>
									<td>{{sbdatas?sbdatas.ngrbirth:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th><span class="mtable_tit">医疗保险</span></th>
									<th>企业</th>
									<th>个人</th>
								</tr>
								<tr>
                  <td>城镇户口</td>
									<td>{{sbdatas?sbdatas.cqymedical:0}}</td>
									<td>{{sbdatas?sbdatas.cgrmedical:0}}</td>
								</tr>
								<tr>
                  <td>农村户口</td>
									<td>{{sbdatas?sbdatas.nqymedical:0}}</td>
									<td>{{sbdatas?sbdatas.ngrmedical:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th rowspan="4"><span class="mtable_tit">企业合计</span></th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>农村户口</td>
								</tr>
								<tr>
									<td>{{sbdatas?sbdatas.cqytotal:0}}</td>
									<td>{{sbdatas?sbdatas.nqytotal:0}}</td>
								</tr>
							</table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th rowspan="4"><span class="mtable_tit">个人合计</span></th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>农村户口</td>
								</tr>
								<tr>
									<td>{{sbdatas?sbdatas.cgrtotal:0}}</td>
									<td>{{sbdatas?sbdatas.ngrtotal:0}}</td>
								</tr>
                </table>

							</div>
							<div class="bi2_table_box">

							<table class="bi2_table">
								<tr>
									<th rowspan="4"><span class="mtable_tit">合计</span></th>
								</tr>
								<tr>
									<td>城镇户口</td>
									<td>农村户口</td>
								</tr>
								<tr>
									<td>{{sbdatas?sbdatas.calltotal:0}}</td>
                  <td>{{sbdatas?sbdatas.nalltotal:0}}</td>
								</tr>
							</table>

							</div>

							<p class="hint">
								1、养老、失业基数下限是3082，医疗、生育、工伤最低下限基数是4624，上限都是23118，您在工资金额输入框里输入3082至23118之间的数字，就可以知道各种户口类别的工作人员的缴费金额。<br>
								2、工伤缴费比例按照0.4%计算。<br>
								3、社保保险缴费计算器的数据，每年七月一日根据政府公布的数据更新。
							</p>

						</div>
					</div>
					<div class="m_sbjsq_bd" style="display:none">
						<div class="bd_item1">
							<h4>公积金计算器</h4>
							<div class="input">
								<input type="" name="" value="" onkeyup="value=value.replace(/[^\d.]/g,'')"  v-model="gjjtext" placeholder="缴费基数" />
								<i>元</i>
							</div>
							<a href="javascript:;" @click="gjjsubmit()">开始计算</a>
						</div>

						<ul class="gjjjs">
							<li>
								<span>企业缴费：</span>
								<p>{{gjjdatas.buspaynum}}</p>
								<i>元</i>
							</li>
							<li>
								<span>个人缴费：</span>
								<p>{{gjjdatas.perpaynum}}</p>
								<i>元</i>
							</li>
							<li>
								<span>缴费合计：</span>
								<p>{{gjjdatas.totalpaynum}}</p>
								<i>元</i>
							</li>
							<li class="last">
								备注：请在缴费基数栏，填写您的缴费基数，单击开始计算
								即可算出您的住房公积金缴费金额了
							</li>
						</ul>

					</div>
					<div class="m_sbjsq_bd" style="display:none">
						<div class="bd_item1">
							<h4>所得税计算器</h4>
							<div class="input">
								<input type="" name="" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" v-model="sdstext" placeholder="请输入员工个人工资金额（税前）" />
								<i>元</i>
							</div>
							<p class="sds_p">起征点：<i>￥5000.00</i></p>
							<a href="javascript:;" @click="sdssubmit()">开始计算</a>
						</div>
            <ul class="gjjjs">
              <li class="first">员工个人工资金额（扣除五险一金与所得税之后工资）：</li>
              <li>
                <p>{{sdsdatas.taxaftermoney}}</p>
                <i>元</i>
              </li>
              <li>
                <span>应缴个税：</span>
                <p>{{sdsdatas.paypersonaltax}}</p>
                <i>元</i>
              </li>
              <li class="last">
              提示：请输入员工个人工资金额（税前），并选择您的国
              籍。单击开始计算，就可以查到您需要缴纳多少个人所得税了。
              </li>
            </ul>

					</div>
				</section>

			</div>

     <section class="jsq4">
     	<div class="jsq4_top">
     		<h5 class="jsq4top_tit">全国免费服务热线 :400-855-1888</h5>
     		<ul class="jsq4top_ul af">
     			<a href="https://m.jzzx.org.cn/list-15-1.html">
     				<li>
     					<img src="~/assets/img/chj_zzjsq_guanyu.png"/>
     					<span>关于我们</span>
     				</li>
     			</a>
     			<a href="https://m.jzzx.org.cn/list-15-1.html">
     				<li>
     					<img src="~/assets/img/chj_zizhi_lianxi.png"/>
     					<span>联系我们</span>
     				</li>
     			</a>
     			<a href="https://m.jzzx.org.cn/list-15-1.html">
     				<li>
     					<img src="~/assets/img/chj_zzjsq_dizhi.png"/>
     					<span>公司地址</span>
     				</li>
     			</a>
     		</ul>
     	</div>
     </section>
     	<div class="jsq4_bottom">
     		<p class="jsq4bom_p1">&copy;Copyright C 2015-2018 All Rights Reserved</p>
     		<p class="jsq4bom_p2">版权所有 中海启航建筑咨询有限公司    苏ICP备18034696号</p>
     	</div>

      <div class="bdtjtc2" style="background: rgba(0,0,0,.7);color: white;">
      	<span style="color: white; font-size: .5rem;margin-top: .2rem;">×</span>
      	<em style="display: inline-block;line-height: 2.6rem;">{{tcmsg}}</em>
      </div>

		</div>

</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  // import Logo from '~/components/Logo.vue'
  export default {
    components: {
      // Logo
    },
    data(){
      return{
        sbtext:'',
        sbdatas:'',
        gjjtext:'',
        gjjdatas:'',
        sdstext:'',
        sdsdatas:'',
        tcmsg: '',
      }
    },

   async asyncData({
   	params
   }) {
   	let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
   	let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/QualificationCounter/qualificationInfoList`);
   	let data = {
   		nav: nh.data,
   		cs: nh2.data
   	};
   	return {
   		title: data
   	}
   },

  head () {
    return {
      title: "社保缴费计算器",
      meta: [
        { hid: 'description', name: 'description', content: "社保缴费计算器"},
        { hid: 'keywords', name: 'keywords', content:"社保缴费计算器" }
      ]
    }
  },
  // middleware: 'statsm',
  mounted:function(){
    console.log(this.title)
    $('.dbct').hide()
    $('footer').hide()
    $('header').hide();

  }
  ,methods:{

    sdssubmit:function(){
      var _this = this

             if(_this.sdstext== "" || _this.sdstext == ("^[A-Za-z]+$")){
               _this.tcmsg = '请输入员工个人工资金额'
               $('.bdtjtc2').addClass('select');
               $('.bdtjtc2').fadeIn(0);
               $('.bdtjtc2').fadeOut(2500);
             }else{
                  _this.$axios.post('https://www.hrto.com.cn/Home/PersonalIncomeTax/PersonalIncomeTaxCalculation','money='+_this.sdstext+'&nationality=1'
                  ).then(function(res){
                      if(res.data == '请输入大于5000的金额'){
                        _this.tcmsg = '请输入大于5000的金额'
                        $('.bdtjtc2').addClass('select');
                        $('.bdtjtc2').fadeIn(0);
                        $('.bdtjtc2').fadeOut(2500);
                      }else{
                          _this.sdsdatas = res.data

                      }



                  })
             }
    },



    gjjsubmit:function(){
      var _this = this
      if(_this.gjjtext== "" || _this.gjjtext == ("^[A-Za-z]+$")){
        _this.tcmsg = '请输入员工个人工资金额'
        $('.bdtjtc2').addClass('select');
        $('.bdtjtc2').fadeIn(0);
        $('.bdtjtc2').fadeOut(2500);
      }else{

        _this.$axios.post('https://www.hrto.com.cn/Home/PublicFund/publicFundCalculation','money='+_this.gjjtext
        ).then(function(res){
            if(res.data == '请输入大于2774的金额'){
              _this.tcmsg = '请输入大于2774的金额'
              $('.bdtjtc2').addClass('select');
              $('.bdtjtc2').fadeIn(0);
              $('.bdtjtc2').fadeOut(2500);
            }else{
                _this.gjjdatas = res.data

            }



        })

      }
    },

    sbsubmit:function(){
      var _this = this

      if(_this.sbtext == "" || _this.sbtext == ("^[A-Za-z]+$")){
        _this.tcmsg = '请输入员工个人工资金额'
        $('.bdtjtc2').addClass('select');
        $('.bdtjtc2').fadeIn(0);
        $('.bdtjtc2').fadeOut(2500);
      }else{

        _this.$axios.post('https://www.hrto.com.cn/Home/FiveInsurance/fiveInsuranceCalculation','money='+_this.sbtext
        ).then(function(res){
            if(res.data == '请输入大于3082的金额'){
              _this.tcmsg = '请输入大于3082的金额'
              $('.bdtjtc2').addClass('select');
              $('.bdtjtc2').fadeIn(0);
              $('.bdtjtc2').fadeOut(2500);
            }else{
                _this.sbdatas = res.data
            }



        })

      }
    },


    tap:function(e1){
      var _this = this
      if(e1 == 0){
        $('.m_sbjsq_bd').eq(0).show().siblings().hide()
      }else if(e1 == 1){
        $('.m_sbjsq_bd').eq(1).show().siblings().hide()
      }else{
        $('.m_sbjsq_bd').eq(2).show().siblings().hide()
      }

    },


      back: function() {
      	this.$router.go(-1);
      },
  }

  }
</script>


<style>
	.jsq4{

		padding: 0rem 0.5rem;
		background-color:#343440;
	}
	.jsq4_top{
		padding-top: 0.45rem;
		padding-bottom: 0.3rem;
		border-bottom: 0.01rem solid rgba(255,255,255,.4);
	}
	.jsq4top_tit{
		color: #ffffff;
		font-size: 0.2rem;
		width: 100%;
		line-height: 0.48rem;
		text-align: center;
		height: 0.48rem;
		border: 0.01rem solid #FFFFFF;
		border-radius: 0.04rem;
		margin-bottom: 0.34rem;
	}
	.jsq4top_ul{
		width: 100%;
		height: 0.45rem;
	}
	.jsq4top_ul li{
		float: left;
		background-repeat: no-repeat;
		width: 33%;
		height: 0.45rem;
		line-height: 0.45rem;
	}
	.jsq4top_ul li img{
		float: left;
		width: 0.45rem;
		height: 0.45rem;
		margin-right: 0.2rem;
	}
	.jsq4top_ul li span{
		float: left;
		font-size: 0.26rem;
		color: rgba(255,255,255,.6);
	}
	.jsq4_bottom{
		padding: 0.3rem 0rem;
		text-align: center;
		font-size: 0.18rem;
		color: rgba(255,254,254,.4);
		background-color:#343440;
	}
  .chj_right{
      position: absolute;
      right: 0.24rem;
      top: 50%;
      width: 0.45rem;
      height: 0.45rem;
      margin-top: -0.34rem;
  }
  .m_sbjsq .gd1{
    position: relative;
  }
  .m_sbjsq .gd1 h3{
    font-size: 0.36rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .chj_right img{
  	width: 100%;
  }
</style>
